<template>
    <div class="register-container">
        <div class="register-wrapper">
            <div class="register-left">
                <div class="register-left-content">
                    <div class="brand-logo">
                        <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <rect width="64" height="64" rx="14" fill="#4caf50" />
                            <path d="M16 32 L32 16 L48 32" stroke="#ffffff" stroke-width="4" fill="none"/>
                            <path d="M24 48 L32 40 L40 48" stroke="#81c784" stroke-width="4" fill="none"/>
                            <circle cx="32" cy="32" r="8" fill="#81c784"/>
                        </svg>
                    </div>
                    <h1 class="welcome-title">欢迎加入</h1>
                    <p class="welcome-subtitle">农产品金融销售平台</p>
                    
                    <div class="feature-list">
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="el-icon-s-finance"></i>
                            </div>
                            <div class="feature-text">
                                <h3>智能金融</h3>
                                <p>提供农业金融服务，助力农产品销售</p>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="el-icon-s-goods"></i>
                            </div>
                            <div class="feature-text">
                                <h3>产销对接</h3>
                                <p>直连产地与市场，减少中间环节</p>
                            </div>
                        </div>
                        <div class="feature-item">
                            <div class="feature-icon">
                                <i class="el-icon-s-promotion"></i>
                            </div>
                            <div class="feature-text">
                                <h3>数据分析</h3>
                                <p>提供市场趋势和销售数据分析</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="decoration-circles">
                        <div class="circle circle-1"></div>
                        <div class="circle circle-2"></div>
                        <div class="circle circle-3"></div>
                    </div>
                </div>
            </div>
            
            <div class="register-right">
                <div class="register-form-container">
                    <div class="form-header">
                        <h2>创建新账号</h2>
                        <p>加入我们，开启智慧农业之旅</p>
                    </div>
                    
                    <el-form ref="registerForm" :model="registerForm" :rules="rules" class="register-form">
                        <el-form-item prop="username">
                            <el-input 
                                v-model="registerForm.username" 
                                placeholder="请输入用户名"
                                prefix-icon="el-icon-user">
                            </el-input>
                        </el-form-item>

                        <el-form-item prop="password">
                            <el-input 
                                type="password" 
                                v-model="registerForm.password" 
                                placeholder="请设置密码"
                                prefix-icon="el-icon-lock"
                                show-password>
                            </el-input>
                        </el-form-item>

                        <el-form-item prop="name">
                            <el-input 
                                v-model="registerForm.name" 
                                placeholder="请输入真实姓名"
                                prefix-icon="el-icon-user">
                            </el-input>
                        </el-form-item>

                        <el-form-item prop="email">
                            <el-input 
                                v-model="registerForm.email" 
                                placeholder="请输入邮箱"
                                prefix-icon="el-icon-message">
                            </el-input>
                        </el-form-item>

                        <el-form-item prop="role">
                            <el-select 
                                v-model="registerForm.role" 
                                placeholder="请选择用户角色"
                                class="role-select">
                                <el-option label="普通用户" value="USER"></el-option>
                                <el-option label="农户" value="FARMER"></el-option>
                                <el-option label="管理员" value="ADMIN"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item v-if="registerForm.role === 'ADMIN'" prop="invitationCode">
                            <el-input 
                                v-model="registerForm.invitationCode" 
                                placeholder="请输入管理员邀请码"
                                prefix-icon="el-icon-key">
                            </el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button 
                                type="success" 
                                class="register-button"
                                @click="onRegister">
                                立即注册
                            </el-button>
                        </el-form-item>

                        <div class="form-footer">
                            <p>已有账号？ <el-link type="success" @click="$router.push('/login')">立即登录</el-link></p>
                        </div>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import request from "@/utils/request";

export default {
    name: 'Register',
    data() {
        // 验证邀请码
        const validateInvitationCode = (rule, value, callback) => {
            if (this.registerForm.role === 'ADMIN') {
                if (!value) {
                    callback(new Error('请输入管理员邀请码'));
                } else if (value !== 'ADMIN666') { // 邀请码写死为ADMIN666
                    callback(new Error('邀请码不正确'));
                } else {
                    callback();
                }
            } else {
                callback();
            }
        };

        return {
            countdown: 0,
            disabled: false,
            timer: null,
            emailCode: '',
            buttonContent: '发送验证码',
            registerForm: {
                username: '',
                password: '',
                name: '',
                email: '',
                code: '',
                role: 'USER',
                status: 1,
                invitationCode: '' // 添加邀请码字段
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入真实姓名', trigger: 'blur' }
                ],
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
                ],
                code: [
                    { required: true, message: '请输入验证码', trigger: 'blur' }
                ],
                role: [
                    { required: true, message: '请选择用户角色', trigger: 'change' }
                ],
                invitationCode: [
                    { validator: validateInvitationCode, trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        sendVerificationCode() {
            if (this.disabled) return;
            
            if (!this.registerForm.email) {
                this.$message.error('请先输入邮箱地址');
                return;
            }

            request.get(`/email/sendEmail/${this.registerForm.email}`).then(res => {
                if (res.code === '0') {
                    this.$message({
                        type: 'success',
                        message: "验证码已发送到您的邮箱,请查收"
                    });
                    console.log(res.data);
                    this.emailCode = res.data;
                    this.startCountdown();
                } else {
                    this.$message({
                        type: 'error',
                        message: res.msg
                    });
                }
            });
        },
        
        startCountdown() {
            this.countdown = 60;
            this.disabled = true;
            this.buttonContent = `${this.countdown}秒后重试`;

            this.timer = setInterval(() => {
                if (this.countdown > 0) {
                    this.countdown--;
                    this.buttonContent = `${this.countdown}秒后重试`;
                } else {
                    clearInterval(this.timer);
                    this.disabled = false;
                    this.buttonContent = '发送验证码';
                }
            }, 1000);
        },

        onRegister() {
            this.$refs.registerForm.validate((valid) => {
                if (valid) {
                    request.post("/user/add", this.registerForm).then(res => {
                        if (res.code === '0') {
                            this.$message({
                                type: 'success',
                                message: "注册成功，请登录"
                            });
                            this.$router.push('/login');
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.msg
                            });
                        }
                    });
                }
            });
        }
    },
    beforeDestroy() {
        clearInterval(this.timer);
    }
};
</script>

<style scoped>
.register-container {
    min-height: 100vh;
    width: 100%;
    background-color: #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.register-wrapper {
    display: flex;
    width: 1000px;
    min-height: 600px;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.register-left {
    width: 45%;
    background: linear-gradient(135deg, #4caf50 0%, #81c784 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

.register-left-content {
    padding: 50px 40px;
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.brand-logo {
    margin-bottom: 30px;
}

.welcome-title {
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 10px;
}

.welcome-subtitle {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 50px;
}

.feature-list {
    margin-top: auto;
}

.feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.feature-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.feature-icon i {
    font-size: 20px;
}

.feature-text h3 {
    font-size: 16px;
    margin: 0 0 5px;
    font-weight: 600;
}

.feature-text p {
    font-size: 14px;
    margin: 0;
    opacity: 0.8;
}

.decoration-circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}

.circle-1 {
    width: 300px;
    height: 300px;
    top: -100px;
    left: -100px;
}

.circle-2 {
    width: 200px;
    height: 200px;
    bottom: -50px;
    right: -50px;
}

.circle-3 {
    width: 150px;
    height: 150px;
    bottom: 100px;
    left: -50px;
}

.register-right {
    width: 55%;
    padding: 40px;
    display: flex;
    align-items: center;
}

.register-form-container {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.form-header {
    margin-bottom: 30px;
    text-align: center;
}

.form-header h2 {
    font-size: 28px;
    color: #333;
    margin: 0 0 10px;
}

.form-header p {
    font-size: 16px;
    color: #666;
    margin: 0;
}

.register-form {
    margin-top: 20px;
}

.role-select {
    width: 100%;
}

.register-button {
    width: 100%;
    height: 44px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    margin-top: 10px;
}

.form-footer {
    margin-top: 20px;
    text-align: center;
    color: #666;
}

:deep(.el-input__inner) {
    height: 44px;
    line-height: 44px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

:deep(.el-input__inner:focus) {
    border-color: #4caf50;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

:deep(.el-form-item) {
    margin-bottom: 20px;
}

:deep(.el-input__prefix) {
    left: 12px;
}

:deep(.el-input__inner) {
    padding-left: 38px;
}

:deep(.el-select .el-input__inner) {
    padding-left: 15px;
}

:deep(.el-button--success) {
    background-color: #4caf50;
    border-color: #4caf50;
}

:deep(.el-button--success:hover) {
    background-color: #2e7d32;
    border-color: #2e7d32;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(76, 175, 80, 0.3);
}

:deep(.el-link--success) {
    color: #4caf50;
}

:deep(.el-link--success:hover) {
    color: #2e7d32;
}

@media (max-width: 768px) {
    .register-wrapper {
        flex-direction: column;
        width: 100%;
    }
    
    .register-left {
        width: 100%;
        padding: 30px 20px;
    }
    
    .register-right {
        width: 100%;
        padding: 30px 20px;
    }
    
    .welcome-title {
        font-size: 28px;
    }
    
    .welcome-subtitle {
        font-size: 16px;
        margin-bottom: 30px;
    }
    
    .feature-list {
        display: none;
    }
}
</style>